<script setup>
import { h, computed, ref } from 'vue';
import { CaretDownOutlined, CaretRightOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import LabelComment from './layer-comment.vue';
import { picState } from '../api/use-task.js';
import { clearList, selectLayer } from '../api/use-layer-common.js';
import { UserOpGte } from '../op-perms.js';

const open = ref(true);
const CaretIcon = computed(() => () => h(open.value ? CaretDownOutlined : CaretRightOutlined));
</script>

<template>
  <details
    class="label-layers"
    :open="open"
    @toggle="event => open = event.currentTarget.open"
  >
    <summary>
      <caret-icon></caret-icon>
      <span>已批注（{{ picState.comments.length }}）</span>
      <div class="fn">
        <template v-if="UserOpGte('审核')">
          <a-button :disabled="!picState.comments.length" @click.stop="() => clearList('comments')">
            <template #icon><delete-outlined style="color: rgb(200,0,0);" /></template>
          </a-button>
        </template>
      </div>
    </summary>

    <p style="margin-bottom: 0; text-align: center; line-height: 30px;">点击批注工具，再点击标签</p>

    <div class="ol-container" style="height: calc(100% - 70px);">
      <ol @click.self="() => editingLayers = []">
        <template v-for="(item, i) in picState.comments" :key="i">
          <label-comment
            :item="item"
            @click.native="() => selectLayer('edit', item)">
          </label-comment>
        </template>
      </ol>
    </div>
  </details>
</template>
